<template>
  <div class="box">
    <TopSearch
      @searchHeader="searchHeader"
      @delsHeader="delsHeader"
      @addHeader="addHeader"
      :control="control"
      :controlPosition="controlPosition"
      :positionName="positionName"
      :disabled="disabled"
      :delsable="delsable"
      :searchConfig="setFormConfig"
    />
    <ProTable
      class="protable"
      :data="tableData"
      :page="tablePage"
      :column="column"
      :rowControl="rowControl"
      :elProps="elProps"
      :disabled="disabled"
      :controlWidth="controlWidth"
      @row-control-click="onRowControlClick"
      @selection-change="onSelectionChange"
      @page-change="onPageChange"
      @pageRefresh="pageRefresh"
    >

    </ProTable>

    <FouDialog
      :title="'添加/修改'"
      :width="'50%'"
      v-model:dialogValue="dialogValue"
    >
      <template #content>
        <div>
          <addEdit ref="AddEditref" :echo="echo"></addEdit>
        </div>
      </template>
      <template #footer>
        <div>
          <el-button @click="dialogValue = false">取消</el-button>
          <el-button type="primary" @click="confirm(buttonType)" color="#081F42"
            >確定</el-button
          >
        </div>
      </template>
    </FouDialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { elProps, options, controlWidth } from "./index.js";
import { setFormConfig, DialogConfig } from "./formConfig";
import addEdit from "./addEdit/index.vue";
import { SchoolList, addSchool, updateSchool,deleteSchool } from "@/http/index.js";
import { dayjs } from "element-plus";
import { loading, closeLoading,messageBox,message } from "@/common/function.js";

const echo = ref({});

// 添加編輯彈窗
const AddEditref = ref(null);
const confirm = (type) => {
  AddEditref.value.DialogCofirm(async (e) => {
    console.log(e);
    if (e) {
      loading();
      if (type == "add") {
        if (e.id) {
          delete e.id;
        }
        await addSchoolList(e);
        closeLoading();
        dialogValue.value = false;
      }
      if (type == "edit") {
        await updateSchoolList(e);
        closeLoading();
        dialogValue.value = false;
      }
    }
  });
};
// 修改学校
const updateSchoolList = async (e) => {
  const data = await updateSchool(e);
  if (data.code == 200) {
    schoolList(obj);
    message('修改學校成功')
  }
};
// 添加学校
const addSchoolList = async (e) => {
  const data = await addSchool(e);
  console.log(data);
  if (data.code == 200) {
    schoolList(obj);
    message('添加學校成功')
  }else{

  }
};

// 字段名对应表头
const column = {
  name: "學校",
  address: "地址",
  mobile: "手機號碼",
  fax: "傳真",
  statuss: "狀態",
  warehouse: "倉庫名字",
  create_time: "發佈時間",
};
// 表格顶部操作按钮
const control = ["search", "dels", "add"];
const controlPosition = [];
const positionName = ref("");

// 未选中数据是 禁用项
const disabled = ["dels"];
const delsable = ref(true);

const searchHeader = async(e, type) => {
    loading();
  Object.assign(obj, e);
 await schoolList(obj);
 closeLoading()
 
};

const dialogValue = ref(false);
const buttonType = ref("");
const addHeader = () => {
  buttonType.value = "add";
  echo.value = {
    name: "",
    address: "",
    fax: "",
    mobile: "",
    warehouse: "",
  };
  dialogValue.value = true;
};

// 表格行内操作按钮
const rowControl = ["rowedit", "rowdel"];

/**表格行内操作
 * @row {object} 行内数据
 * @type {string} 点击按钮类型
 */
const onRowControlClick = ({ scope: { row }, type }) => {
  if (type == "rowedit") {
    const { id, name, address, fax, mobile, warehouse } = row;
    buttonType.value = "edit";
    dialogValue.value = true;
    echo.value = { id, name, address, fax, mobile, warehouse };
  }
  if (type == 'rowdel') {
        messageBox().then(async () => {
          await delSchoolList(row.id) 
    });
  }
};
const delSchoolList = async (id)=>{
           loading();
  const data = await deleteSchool(id)
        closeLoading()
  if (data.code == 200) {
    schoolList(obj)
    message('成功刪除學校')
  }
}
/** 多选
 * @selected {Array} 被选中的行
 */
const ids = ref('')
const onSelectionChange = (e) => {
  let row_id = []
  e.forEach(e => {
    row_id.push(e.id)
  });
  ids.value = row_id.toString()
  delsable.value = e.length === 0;
};
const delsHeader = () => {
      messageBox().then(async () => {
        await delSchoolList(ids.value) 
    })
};
/**
 * @e {number} 分页操作后的值（当前页|改变后的每页条数）
 * @type {string} <current|size> 分页操作类型（当前页改变|每页条数改变）
 */
const onPageChange =async ({ e, type }) => {
  console.log(e, type);
  if (type == "current") {
    obj.page = e
  }
  if (type == "size") {
     obj.page = 1
    obj.limit = e
  }
  await schoolList(obj)
};
// 弹窗
const dialogVisible = ref(false);

const handleClose = (done) => {
  dialogVisible.value = false;
};

// const tableData = ref([])
import { useCounterStore } from "@/stores/index.js";
import { storeToRefs } from "pinia";
const store = useCounterStore();
const { tableData } = storeToRefs(store);
const { tablePage } = store;
const { schoolList } = store;
const obj = reactive({
  page: tablePage.current_page,
  limit: tablePage.per_page,
  name: "",
  status: "",
  time: "",
});

const pageRefresh = async() => {
  loading()
  await schoolList(obj);
  closeLoading()
};
onMounted(async() => {
  loading()
  await schoolList(obj);
  closeLoading()
});
</script>

<style lang="less" scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.box {
  padding: 16px 33px;
}
</style>